<template>
  <div :class="className" :style="style"></div>
</template>

<script>
let echarts = require('echarts')
require('echarts/theme/shine'); // echarts 主题

export default {
  name: "lineChart",
  props: {
    className: {
      type: String,
      default: 'lineChart'
    },
    width: {
      type: String,
      default: '90%'
    },
    info: {
      type: Array
    }
  },
  data() {
    return {
      chart: null,
      style: {
        width: this.width,
        height: '270px',
        backgroundColor: 'white',
        margin: '0 0.53333rem 0.26667rem',
        borderRadius: '0.26667rem'
      }
    };
  },
  computed: {
    chartData() {
      return this.info.map(value => {
        return [value.time, value.drink];
      })
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = new echarts.init(document.querySelector('.' + this.className), 'shine');

      let option = {
        title: {
          left: 'center',
          text: '这是你最近几天的喝水量情况统计🌝',
          textStyle: {
            color: '#0DB9F2',        //颜色
            fontStyle: 300,     //风格
            fontWeight: 300,    //粗细
            fontFamily: 'Microsoft yahei',   //字体
            fontSize: 14,     //大小
            align: 'center'   //水平对齐
          },
        },
        tooltip: {
          triggerOn: 'axis',
          position: function (pt) {
            return [pt[0], 130];
          },
          backgroundColor: 'rgba(255,255,255,0.8)',//通过设置rgba调节背景颜色与透明度
        },
        xAxis: {
          type: 'time',
          axisPointer: {
            snap: true,
            lineStyle: {
              color: '#4d93f4',
              width: 2
            },
            label: {
              show: true,
              formatter: function (params) {
                return echarts.format.formatTime('yyyy-MM-dd', params.value);
              },
              backgroundColor: '#4d93f4'
            },
            handle: {
              show: true,
              color: '#4d93f4',
              size: 20,
              margin: 35
            }
          },
          splitLine: {
            show: true
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            inside: true
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            inside: true,
            formatter: '{value}'
          },
          z: 10
        },
        grid: {
          left: 15,
          right: 15,
          height: 150
        },
        series: [
          {
            name: '喝水量',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 3,
            sampling: 'average',
            itemStyle: {
              color: '#0770FF'
            },
            stack: 'a',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(07,70,255,0.8)'
              }, {
                offset: 1,
                color: 'rgb(163,182,246)'
              }])
            },
            data: this.chartData
          }
        ]
      };

      this.chart.setOption(option);
    },
  }
}
</script>
